// 多选题
import React, { useState } from "react";

import { StyleSheet, Text, View, TextInput, Alert } from "react-native";

const ShowEssayQues = ({ number, QuesContent, isEdit, flag, editAnswer }) => {
  // console.log("展示问答题---", QuesContent);
  const [answer, setAnswer] = useState(QuesContent.answer);
  // console.log("答案---", answer);
  // const QuesContent = {
  //   type: 1, // 2：单选题
  //   needAnswer: true,
  //   title: "调查点类型",
  // };
  return (
    <View style={styles.borderView}>
      <View style={{ flexDirection: "row", marginBottom: 7 }}>
        {QuesContent.needAnswer ? (
          <Text style={{ color: "red", marginRight: 1 }}>* </Text>
        ) : null}
        <Text style={{ fontWeight: "bold", color: "#000", fontSize: 15 }}>
          {(number != "" ? number + ". " : "") + QuesContent.title}
        </Text>
      </View>
      <View>
        <TextInput
          style={styles.inputBox}
          multiline={true}
          // maxLength={500}
          value={answer}
          placeholder="请输入答案"
          editable={isEdit}
          onChangeText={(text) => {
            // setTitle(text);
            // console.log("类型---", QuesContent.type);
            if (QuesContent.type == 7) {
              if (isNaN(Number(text))) {
                Alert.alert("请在此空输入正确的数字!");
              } else {
                if (flag[0] == 2 && flag[1] >= 0 && flag[1] < 10) {
                  if (Number(text) >= 0 && Number(text) <= 30) {
                    setAnswer(text);
                    editAnswer(flag[0], flag[1], flag[2], {
                      optionFlag: -1,
                      answer: text,
                    });
                  } else {
                    Alert.alert("此空取值范围为0-30!");
                  }
                } else {
                  setAnswer(text);
                  editAnswer(flag[0], flag[1], flag[2], {
                    optionFlag: -1,
                    answer: text,
                  });
                }
              }
            } else if (QuesContent.type == 1) {
              setAnswer(text);
              editAnswer(flag[0], flag[1], flag[2], {
                optionFlag: -1,
                answer: text,
              });
            }
          }}
        ></TextInput>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  borderView: {
    paddingTop: 9,
    paddingLeft: 15,
    paddingRight: 15,
    paddingBottom: 10,
    // justifyContent: "center",
    // backgroundColor: "#eee",
    // height: "100%",
  },
  inputBox: {
    marginTop: 6,
    borderColor: "#ddd",
    borderWidth: 1,
    // height: 100,
    borderRadius: 3,
    padding: 10,
    paddingTop: 10,
    paddingBottom: 10,
    marginLeft: 5,
    marginRight: 5,
    width: "97%",
  },
});

export default ShowEssayQues;
